<template>
	<div>
		<div id="query">
			<el-header class="el-header">
				药品管理
			</el-header>
		</div>
		<div style="margin-top: 15px;">
			<el-input placeholder="请输入内容" v-model="input" class="input-with-select" style="width: 500px;">
				<el-select v-model="select" slot="prepend" placeholder="请选择">
					<el-option label="药品名称" value="1"></el-option>
					<el-option label="药物编号" value="2"></el-option>
				</el-select>
				<el-button slot="append" icon="el-icon-search" @click="Query"></el-button>
			</el-input>
			<el-button type="success" style="margin-left: 100px;" @click="dialogFormVisible = true">添加药品</el-button>
		</div>
		<div>
			<el-table :data="tableData" style="width: 100%">
				<el-table-column prop="MeID" label="编号" width="120">
					<template slot-scope="scope">
						<span>{{scope.row.MeID}}</span>
						<!-- <el-input v-if="scope.row.isEdit" v-model="scope.row.MeID"></el-input> -->
					</template>
				</el-table-column>
				<el-table-column prop="MeName" label="药品名称" width="120">
					<template slot-scope="scope"><span v-if="!scope.row.isEdit">{{scope.row.MeName}}</span>
						<el-input v-if="scope.row.isEdit" v-model="scope.row.MeName"></el-input>
					</template>
				</el-table-column>
				<el-table-column prop="MeSpecs" label="规格" width="120">
					<template slot-scope="scope"><span v-if="!scope.row.isEdit">{{scope.row.MeSpecs}}</span>
						<el-input v-if="scope.row.isEdit" v-model="scope.row.MeSpecs"></el-input>
					</template>
				</el-table-column>
				<el-table-column prop="Meprice" label="单价" width="120">
					<template slot-scope="scope"><span v-if="!scope.row.isEdit">{{scope.row.Meprice}}</span>
						<el-input v-if="scope.row.isEdit" v-model="scope.row.Meprice"></el-input>
					</template>
				</el-table-column>
				<el-table-column prop="Meuse" label="用法" width="120">
					<template slot-scope="scope"><span v-if="!scope.row.isEdit">{{scope.row.Meuse}}</span>
						<el-input v-if="scope.row.isEdit" v-model="scope.row.Meuse"></el-input>
					</template>
				</el-table-column>
				<el-table-column prop="Memuch" label="用量" width="120">
					<template slot-scope="scope"><span v-if="!scope.row.isEdit">{{scope.row.Memuch}}</span>
						<el-input v-if="scope.row.isEdit" v-model="scope.row.Memuch"></el-input>
					</template>
				</el-table-column>
				<el-table-column prop="Metime" label="频次" width="120">
					<template slot-scope="scope"><span v-if="!scope.row.isEdit">{{scope.row.Metime}}</span>
						<el-input v-if="scope.row.isEdit" v-model="scope.row.Metime"></el-input>
					</template>
				</el-table-column>
				<el-table-column prop="function" label="操作">
					<template slot-scope="scope">
						<el-button v-if="!scope.row.isEdit" type="primary " @click="Change(scope.$index,scope.row)">修改
						</el-button>
						<el-button v-if="scope.row.isEdit" type="success "
							@click="CompleteChange(scope.$index,scope.row)">修改完成</el-button>
						<el-button type="danger " @click="Delete(scope.$index)"
							@click.native.prevent="deleteRow(scope.$index, tableData)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div>
			<el-row>
				<el-dialog title="新增药品" :visible.sync="dialogFormVisible">
					<el-form :model="form">
						<el-form-item label="编号" :label-width="formLabelWidth">
							<el-input v-model="form.MeID" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="药品名称" :label-width="formLabelWidth">
							<el-input v-model="form.MeName" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="规格" :label-width="formLabelWidth">
							<el-input v-model="form.MeSpecs" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="单价" :label-width="formLabelWidth">
							<el-input v-model="form.Meprice" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="用法" :label-width="formLabelWidth">
							<el-input v-model="form.Meuse" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="用量" :label-width="formLabelWidth">
							<el-input v-model="form.Memuch" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="频次" :label-width="formLabelWidth">
							<el-input v-model="form.Metime" autocomplete="off"></el-input>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="dialogFormVisible = false">取 消</el-button>
						<el-button type="primary " @click="Add()">确 定</el-button>
					</div>
				</el-dialog>
			</el-row>
		</div>
	</div>
</template>
<style>
	.el-header {
		text-align: left;
		font-size: 40px;
		border-radius: 4px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		background-color: #4fc1b0;
	}

	.el-select .el-input {
		width: 130px;
	}

	.input-with-select .el-input-group__prepend {
		background-color: #fff;
	}
</style>
<script>
	import axios from 'axios';
	import {
		showMsgTitle
	} from '@/utils/api2'
	import {
		showMsgConfirm
	} from '@/utils/api2'
	import {
		getRequest
	} from '@/utils/api2'
	import {
		postRequest
	} from '@/utils/api2'
	export default {
		data() {
			return {
				isEdit: false, //编辑
				// msg1: '用户管理',
				input: '',
				select: '',
				tableData: [{}],
				dialogFormVisible: false,
				form: {
					MeID: '',
					MeName: '',
					MeSpecs: '',
					Meprice: '',
					Meuse: '',
					Memuch: '',
					Metime: '',
					title: '',
				},
				formLabelWidth: '120px'
			}
		},
		mounted: function() {
			let url = "/queryDoctor";
			let _this = this;
			getRequest(url).then(resp => {
				if (resp.status == 200) {
					//alert(resp.data);
					_this.tableData = resp.data;
				} else {
					_this.$message({
						type: 'error',
						message: '数据加载失败1!'
					});
				}
			}, resp => {
				_this.loading = false;
				if (resp.response.status == 403) {
					_this.$message({
						type: 'error',
						message: resp.response.data
					});
				} else {
					_this.$message({
						type: 'error',
						message: '数据加载失败2!'
					});
				}
			}).catch(resp => {
				//压根没见到服务器
				_this.loading = false;
				_this.$message({
					type: 'error',
					message: '数据加载失败3!'
				});
			});
		},
		methods: {
			deleteRow(index, rows) {
				rows.splice(index, 1);
			},
			Query() {
				let url = "/queryDoctor";
				let _this = this;
				getRequest(url).then(resp => {
					if (this.select == '') {
						this.$message({
							showClose: true,
							type: "false",
							message: "请选择查询方式"
						});
					} else if (this.select == 2) {
						this.tableData = [];
						for (var i = 0; i < resp.data.length; i++) {
							if (this.input == resp.data[i].docid) {
								this.tableData.push(resp.data[i]);
							}
							if (this.input == '') {
								this.tableData = resp.data;
							}
						}
					} else if (this.select == 1) {
						this.tableData = [];
						for (var i = 0; i < resp.data.length; i++) {
							if (this.input == resp.data[i].name) {
								this.tableData.push(resp.data[i]);
							}
							if (this.input == '') {
								this.tableData = resp.data;
							}
						}
					}
				})
			}, //query end
			Add() {
				/********************/
				this.dialogFormVisible = false;
				console.log(this.form);
				postRequest('/insertDoctor', this.form);
				this.$message({
					showClose: true,
					type: "success",
					message: "添加成功"
				});
				//location.href='/user_admin'				
				/**************************/
                /***************动态添加行****************/
				if (this.tableData == undefined) {
				        this.tableData = new Array();
				      }			
						let obj = {};
						obj.depid = this.form.depid;
						obj.deptype =this.form.deptype;
						obj.name =this.form.name;
						obj.number =0;
				      this.tableData.push(this.form);
				/*********************************/	

			}, //Add end
			Delete(index) {
				postRequest('/deleteDoctor', this.tableData[index]);
				this.$message({
					showClose: true,
					type: "success",
					message: "删除成功"
				});
			}, //delete end
			Change(index, row) {
				this.$set(row, 'isEdit', true);
			}, //change end
			CompleteChange(index, row) {
				this.$set(row, 'isEdit', false);
				console.log(this.tableData);
				let data = JSON.stringify({
					userId: this.tableData[index].userId,
					password: this.tableData[index].password,
					name: this.tableData[index].name,
					deptId: this.tableData[index].deptId,
					account: this.tableData[index].account,
					level: this.tableData[index].level,
					fees: this.tableData[index].fees,
					title: this.tableData[index].title,
					fees: this.tableData[index].fees,
				});
				console.log(data);
				/********************/
				console.log(data);
				console.log(this.tableData[index]);
				postRequest('/updataDoctor', this.tableData[index]);

				//location.href='/user_admin'				
				/**************************/
			} //change end

		} //method end
	}
</script>
